<template>
  <Dialog :show="true" :isH5="!isPC" :isHeaderShow="false" :isFooterShow="false" :background="false"
    @update:show="closeCreated">
    <div class="group" :class="[!isPC ? 'group-h5' : '']">
      <div class="group-box">
        <header class="group-box-header">
          <Icon :file="isPC ? closeIcon : backIcon" class="icon-close" size="16px" @onClick="closeCreated" />
          <h1 class="group-box-header-title">
            {{ headerTitle }}
          </h1>
        </header>
        <ul v-if="!groupInfo.isEdit" class="group-list">
          <!-- <li class="group-list-item">
            <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群头像') }}</label>
            <Avatar :url="groupInfo.profile.avatar" />
          </li> -->
          <ul>
            <li v-for="(item, index) in createInfo" :key="index" class="group-list-item">
              <label class="group-list-item-label">{{ item.name }}</label>
              <input class="text" v-model="groupInfo.profile[item.key]" type="text" :placeholder="item.placeholder">
              <!-- <Icon :file="rightIcon" /> -->
              <!-- <span v-else class="group-h5-list-item-content" @click="edit(item.key)">
                <p class="content">{{ groupInfo.profile[item.key] }}</p>
                <Icon :file="rightIcon" />
              </span> -->
            </li>
            <li class="group-list-introduction">
              <div class="group-list-item">
                <label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群类型') }}</label>
                <GroupIntroduction v-if="isPC" :groupType="groupInfo.profile.type" @selectType="selected" />
                <span v-else class="group-h5-list-item-content" @click="edit('type')">
                  <p class="content">{{ groupTypeDetail.label }}</p>
                  <Icon :file="rightIcon" />
                </span>
              </div>
              <!-- <article v-if="!isPC" class="group-h5-list-item-introduction">
                <label class="introduction-name">{{ groupTypeDetail.label }}：</label>
                <span class="introduction-detail">{{ groupTypeDetail.detail }}</span>
                <a :href="documentLink.product.url" target="view_window">
                  {{ TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`) }}
                </a>
              </article> -->
            </li>
            <li class="group-list-introduction">
              <div class="group-list-item group-list-item2" style="align-items: flex-start;">
                <label class="group-list-item-label" style="margin-bottom: 20rpx; display: block;">群简介</label>
                <textarea class="aboutCon" style="display: block; border: 1px solid #ededed; width: 100%; padding: 10rpx 16rpx; font-size: 26rpx; box-sizing: border-box; height: 160rpx; text-align: left;">{{aboutCon}}</textarea>
              </div>
            </li>
            
          </ul>
        </ul>
        <!-- 修改群名称 -->
        <div v-else class="group-list group-list-edit">
          <input v-if="groupInfo.groupConfig.type === 'input'" v-model="groupInfo.groupConfig.value"
            class="group-name-input" type="text"
            :placeholder="TUITranslateService.t(`TUIGroup.${groupInfo.groupConfig.placeholder}`)">
          <GroupIntroduction v-else class="group-introduction-list" :groupType="groupInfo.groupConfig.value"
            @selectType="selected" />
        </div>
        <footer class="group-profile-footer">
          <button v-if="isPC && !groupInfo.isEdit" class="btn-default" @click="closeCreated">
            {{ TUITranslateService.t('TUIGroup.取消') }}
          </button>
          <button class="btn-submit" :disabled="submitDisabledStatus" @click="submit">
            {{ TUITranslateService.t('TUIGroup.确认') }}
          </button>
        </footer>
      </div>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
  import TUIChatEngine, {
    TUITranslateService,
    TUIGroupService,
    TUIStore,
    StoreName,
  } from '@tencentcloud/chat-uikit-engine';
  import { computed, reactive, ref, watchEffect } from '../../../adapter-vue';
  import documentLink from '../../../utils/documentLink';
  import { isPC } from '../../../utils/env';
  import Icon from '../../common/Icon.vue';
  import backIcon from '../../../assets/icon/back.svg';
  import closeIcon from '../../../assets/icon/icon-close.svg';
  import rightIcon from '../../../assets/icon/right-icon.svg';
  import GroupIntroduction from './group-introduction/index.vue';
  import { groupIntroConfig, findGroupIntroConfig } from './group-introduction/config';
  import Dialog from '../../common/Dialog/index.vue';
  import { Toast, TOAST_TYPE } from '../../common/Toast/index';
  import Avatar from '../../common/Avatar/index.vue';
  import Server from '../server';
  import { IUserProfile } from '../../../interface';
  import { zxbAjax } from '../../index.ts';

  const TUIGroupServer = Server.getInstance();
  const TUIConstants = TUIGroupServer.constants;

  const groupInfo = reactive<any>({
    profile: {
      groupID: '',
      name: '',
      type: groupIntroConfig[0].type,
      avatar: groupIntroConfig[0].icon,
      introduction: '',
      notification: '',
      // joinOption: '',
      memberList: [],
      isSupportTopic: false,
    },
    groupConfig: {
      title: '',
      value: '',
      key: '',
      type: '',
      placeholder: '',
    },
    isEdit: false,
  });

  watchEffect(() => {
    const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
    groupInfo.profile.memberList = params.memberList;
    groupInfo.groupConfig.title = params.title;
  });

  const groupTypeDetail = computed(() => {
    return findGroupIntroConfig(groupInfo.profile.type);
  });

  const headerTitle = computed(() => {
    let name = '添加群聊';
    if (groupInfo.isEdit) {
      name = groupInfo.groupConfig.title;
    }
    return TUITranslateService.t(`TUIGroup.${name}`);
  });

  const createInfo = computed(() => {
    const groupNameInput = {
      name: TUITranslateService.t('TUIGroup.群名称'),
      key: 'name',
      placeholder: TUITranslateService.t('TUIGroup.请输入群名称'),
    };
    const groupIDInput = {
      name: `${TUITranslateService.t('TUIGroup.群ID')}(${TUITranslateService.t('TUIGroup.选填')})`,
      key: 'groupID',
      placeholder: TUITranslateService.t('TUIGroup.请输入群ID'),
    };
    return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
      ? [groupNameInput]
      : [groupNameInput, groupIDInput];
  });

  const submitDisabledStatus = computed(() => {
    return groupInfo.profile.name === '' && !groupInfo.isEdit;
  });

  const group_type_id = ref('');
  const aboutCon = ref('');
  const selected = (item : any) => {
    if (groupInfo.profile.type !== item.type) {
      groupInfo.profile.type = item.type;
      group_type_id.value = item.type_id
      groupInfo.profile.avatar = findGroupIntroConfig(item.type).icon;
      if (groupInfo.isEdit) {
        groupInfo.groupConfig.value = item.type;
      }
    }
  };

  const createGroup = async (options : any) => {
    try {
      options.memberList = options.memberList.map((item : IUserProfile) => {
        return { userID: item.userID };
      });
      if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
        delete options.groupID;
      }
      const res = await TUIGroupService.createGroup(options);


      const { type, groupID, name, avatar, notification, memberList } = res.data.group;
      const user_ids = memberList.map((m : any) => {
        return m.userID
      })
      console.log('res0000000---------->', groupID,group_type_id,  res, user_ids.join(','))
      zxbAjax('/api/crowd/addCrowd', {
        group_id: groupID,
        name: name,
        image: avatar,
        notice: notification,
        user_id: user_ids.join(','),
        type_id: group_type_id.value,
        remark: aboutCon.value
      }, (res1 : any) => {
        console.log('res1111---------->', res1)
      })
      if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
        await TUIGroupService.joinGroup({
          groupID: res.data.group.groupID,
          applyMessage: '',
        });
      }
      handleCompleteCreate(res.data.group);
      Toast({
        message: TUITranslateService.t('TUIGroup.群组创建成功'),
        type: TOAST_TYPE.SUCCESS,
      });
    } catch (err : any) {
      Toast({
        message: err.message,
        type: TOAST_TYPE.ERROR,
      });
    }
  };

  const submit = () => {
    const { profile } = groupInfo;
    if (groupInfo.isEdit) {
      groupInfo.profile[groupInfo.groupConfig.key] = groupInfo.groupConfig.value;
      return groupInfo.isEdit = !groupInfo.isEdit;
    } else {
      createGroup(profile);
    }
  };

  const closeCreated = () => {
    if (groupInfo.isEdit) {
      return groupInfo.isEdit = !groupInfo.isEdit;
    }
    handleCompleteCreate(null);
  };

  const edit = (label : string) => {
    groupInfo.isEdit = !groupInfo.isEdit;
    groupInfo.groupConfig.key = label;
    groupInfo.groupConfig.value = (groupInfo.profile as any)[label];
    switch (label) {
      case 'name':
        groupInfo.groupConfig.title = '设置群名称';
        groupInfo.groupConfig.placeholder = '请输入群名称';
        groupInfo.groupConfig.type = 'input';
        break;
      case 'groupID':
        groupInfo.groupConfig.title = '设置群ID';
        groupInfo.groupConfig.placeholder = '请输入群ID';
        groupInfo.groupConfig.type = 'input';
        break;
      case 'type':
        groupInfo.groupConfig.title = '选择群类型';
        groupInfo.groupConfig.type = 'select';
        break;
    }
  };

  const handleCompleteCreate = (group : any) => {
    TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false);
    const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
    callback && callback(group);
  };
</script>
<style lang="scss" scoped src="./style/index.scss"></style>
<style lang="scss" scoped>
:deep{
  .uni-textarea-textarea{display: block; border: 1px solid #ededed;}
}
.group-h5{
  height: calc(100% + 80rpx);
  .group-box{
    background-color: #fff;padding: 0 30rpx; box-sizing: border-box;
    .group-box-header{
      padding: 30rpx 0 10rpx;
      .icon-close{left: 0;}
    }
    .group-list-item{
      min-height: 94rpx; display: flex; align-items: center; border-bottom: 1px solid #ededed; padding: 0;
      uni-label.group-list-item-label{text-align: left; font-size: 28rpx;}
      .text{height: 94rpx; border: none; text-align: right;}
    }
    .group-list-item2{padding:30rpx 0; box-sizing: border-box; border-bottom: none;}
    .group-h5-list-item-content{
      .content{padding: 0 6rpx;}
    }
  }
}
.group-profile-footer{padding: 40rpx 30rpx !important; margin: 0 -30rpx;}
.btn-submit{width: 100%; margin-left: 0; box-sizing: border-box; height:86rpx; line-height: 86rpx; font-size: 30rpx;}

</style>